<!-- 
  @name: 蓄注详情
  @date: 2020.3.11
 -->
<template>
	<view class="content">
		<!-- 蓄注信息 -->
		<view class="card">
			<view class="line">
				<view class="left">蓄注单号</view>
				<view class="num">{{info.recordCode}}</view>
			</view>
			<view class="line">
				<view class="left">加注机</view>
				<view>{{info.macName}}</view>
			</view>
			<view class="line">
				<view class="left">蓄注量</view>
				<view class="num">{{info.recordNum}}kg</view>
			</view>
			<view class="line">
				<view class="left">供应商</view>
				<view v-if="info.operatorName">{{info.operatorName}}</view>
				<view v-else>--</view>
			</view>
			<view class="line">
				<view class="left">蓄注时间</view>
				<view class="num">{{info.recordTime}}</view>
			</view>
		</view>
		
		<!-- 蓄注单据 -->
		<view class="card-2" v-if="info.recordImage">
			<view class="left">蓄注单据</view>
			<image class="img" :src="info.recordImage" @tap="showBig = true"></image>
		</view>
		
		<!-- 蓄注单据-大图 -->
		<view class="_popup" v-show="showBig" @tap="showBig = false"></view>
		<view class="popup-view" v-show="showBig">
			<view class="close" @tap="showBig = false"></view>
			<image class="img" mode="widthFix" :src="info.recordImage"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordId: '',  //记录id
				info: {
					recordImage: ''
				},  //信息
				showBig: false,  //是否显示单据大图
			}
		},
		onLoad(e) {
			this.recordId = e.recordId;
			this.getInfo();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.getInfo();
				this.$store.commit('hasLogin');
			}
		},
		methods: {
			//获取信息
			getInfo() {
				this.$http({
					url: this.$api.recordUrl + 'getfactoryrecorddetail',
					data: {
						recordId: this.recordId
					}
				}).then(res => {
					this.info = res;
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		align-items: center;
		justify-content: center;
	}
	
	.card {
		width: 730rpx;
		padding: 0 20rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		.line {
			width: 100%;
			height: 90rpx;
			padding: 0 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				flex: 1;
				color: $color-grey-dark;
			}
			.num {
				font-family: $font-family-num;
			}
		}
	}
	
	.card-2 {
		width: 730rpx;
		height: 140rpx;
		padding: 0 30rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			flex: 1;
		}
		.img {
			width: 100rpx;
			height: 100rpx;
		}
	}
	
	.popup-view {
		position: fixed;
		top: 150rpx;
		left: 0;
		right: 0;
		z-index: $z-index-popup-info;
		.img {
			width: 100%;
		}
		.close {
			position: absolute;
			top: -80rpx;
			right: 30rpx;
			width: 37rpx;
			height: 37rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UAFGAbG47AAACr5SBkYk079.png');
		}
	}
</style>
